<template>
  <div class="OptionsPage">
    <van-nav-bar
      left-arrow
      title="设置"
      @click-left="onClickLeft"
      :border="false"
    />
    <van-cell
      title="手工客123"
      is-link
      label="可修改个人资料"
      @click="changeInfo"
    >
      <img src="@/assets/head.jpg" alt="" />
    </van-cell>
    <van-cell title="我的地址" is-link />
    <van-cell title="修改密码" is-link @click="changePwd" />
    <div style="height: 10px"></div>
    <van-cell title="注销账号" is-link @click="closeAccount" />
    <div style="height: 10px"></div>
    <van-cell title="退出登录" is-link @click="showPopup"/>
    <van-popup style="text-align:center" v-model:show="show" position="bottom" :style="{ height: '30%' }">
      <div class="download">
        <span>你确定要退出登录吗?</span>
        <p @click="sure">确定</p>
        <p class="unenlist" @click="shows">取消</p>
      </div>
  
    </van-popup>
  </div>
</template>
<script setup lang="ts">
  import {ref} from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push({
    name: "my",
  });
}
function changeInfo() {
  router.push({
    name: "changeInfo",
  });
}
function changePwd() {
  router.push({
    name: "changePwd",
  });
}
function closeAccount() {
  router.push({
    name: "closeAccount",
  });
}
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const shows = () => {
  show.value = false;
};
function sure() {
  router.push({
    name: "my",
  });
}


</script>
<style scoped>
.OptionsPage {
  height: 100vh;
  /* width: 100vw; */
  background-color: rgba(0, 0, 0, 0.047);
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.van-cell {
  align-items: center;
}
.van-popup{
  position: relative;
}
.download{
  width: 80%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  line-height: 40px;
  font-size: 18px;
  margin-top: 20px;
}
.download p{
  border: 1px solid gainsboro;
  flex: 1;
  border-radius: 30px;
  margin-top: 20px;
}
.unenlist{
  background-color: gray;
  color: white;
}

</style>

<style>
.van-icon-arrow-left:before {
  color: gray;
}

</style>
